<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content ="telephone=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <style>
        /** 清除内外边距 **/
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
        pre, /* text formatting elements 文本格式元素 */
        form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
        th, td /* table elements 表格元素 */ {
            margin: 0;
            padding: 0;
        }
        /** 设置默认字体 **/
        body,
        button, input, select, textarea /* for ie */ {
            font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;
        }
        h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
        address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
        code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
        small { font-size: 12px; } /* 小于 12px 的中文很难阅读, 让 small 正常化 */
        /** 重置列表元素 **/
        ul, ol { list-style: none; }
        /** 重置文本格式元素 **/
        a { text-decoration: none; }
        a:hover { text-decoration: underline; }
        sup { vertical-align: text-top; } /* 重置, 减少对行高的影响 */
        sub { vertical-align: text-bottom; }
        /** 重置表单元素 **/
        legend { color: #000; } /* for ie6 */
        fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
        button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
        /* 注：optgroup 无法扶正 */
        /** 重置表格元素 **/
        table { border-collapse: collapse; border-spacing: 0; }
        /* 重置 HTML5 元素 */
        article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
        summary, time, mark, audio, video {
            display: block;
            margin: 0;
            padding: 0;
        }
        html,body {
            margin: 0;
        }
        .container {
            background: #fff;
        }
        .container .header {
            padding: 14px;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .container .header .logo {

            width: 100px;
            height: 100px;
        }
        .container .header .info {
            flex: 1;
            margin-left: 10px;
            height: 100px;
        }
        .container .header .time {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        p {
            margin: 0;
            padding: 0;
        }
        .container .header .info .time {
            font-size: 12px;
            color: #444;
        }
        .margin-top-8 {
            margin-top: 8px;
        }
        .shop-name {
            width: 100px;
            font-size: 15px;
            color: #000c17;
            text-align: center;
        }
        .content {
            padding: 14px;
            padding-top: 0;

        }
        .cell {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 14px;
            margin-top: 12px;
            line-height: 1.5;
        }
        .cell .label {
            flex-shrink: 0;
            min-width: 100px;
            text-align: center;
            color: #888;
        }
        .cell .value {
            text-align: right;
            word-break: break-word;
        }
        .orange {
            color: #9F7D51;
        }
        .map-view {
            width: 100%;
            height: auto;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <img src="{{logo}}" class="logo">
        <div class="info">
            <p class="time margin-top-8">
                <span>{{workday_tips}}</span>
                <span>{{workday}}</span>
            </p>
<!--            <p class="time margin-top-8">-->
<!--                <span>{{saturday_tips}}</span>-->
<!--                <span>{{saturday}}</span>-->
<!--            </p>-->
            <p class="time margin-top-8">
                <span>{{sunday_tips}}</span>
                <span>{{sunday}}</span>
            </p>
        </div>
    </div>
    <div class="content">
        <p class="shop-name">{{shop_name}}</p>
        <p class="cell">
            <span class="label">{{call_tips}}</span>
            <span class="value orange">{{call}}</span>
        </p>
        <p class="cell">
            <span class="label">{{address_tips}}</span>
            <span class="value">{{address}}</span>
        </p>
        <div class="thumb">
            {{content}}
        </div>
        <div class="map">
            <img src="{{map}}" class="map-view">
        </div>
    </div>
</div>
</body>
</html>
